<extend name="Public/base" />

<block name="body">
	<!-- 标题栏 -->
	<div class="main-title">
		<h2></h2>
	</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="width: 50%;height:400px;display: inline-block;"></div><div id="main2" style="width: 50%;height:400px;display: inline-block;"></div>

    <div class="form-item">
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
</block>

<block name="script">
	<script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
<script type="text/javascript" src="__STATIC__/echarts.min.js"></script>
<script type="text/javascript">
/*
var jsonObj = {bookGameId:'{:I('id')}',classId:'{:I('classid')}'};
//alert('{:I('id')}');
//alert('{:I('classid')}');

$.post("{:U('getReadOrNotData')}",jsonObj,function(data){

	var dataObj = eval("data");
    var bookname=[];
    var read=[];
    var not_read=[];
	for(var i = 0; i<dataObj.length; i++){
        bookname.push(dataObj[i].bookname);
        read.push(dataObj[i].read_times);
        not_read.push(dataObj[i].not_read);
	}
	// 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    myChart1.setOption({
	    title: {
	        text: '本班具体图书阅读统计柱状图',
	        subtext: ''
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
	    legend: {
	        data: ['本班已读人数', '本班未读人数'],
            left: 'right',
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: {
	        type: 'value',
	        boundaryGap: [0, 0.01]
	    },
		yAxis: {
	        type: 'category',
	        data: bookname
	    },
	    series: [
	        {
	            name: '本班已读人数',
	            type: 'bar',
	            data: read
	        },
	        {
	            name: '本班未读人数',
	            type: 'bar',
	            data: not_read
	        }
	    ]
	});
});

$.post("{:U('getReadTimeData')}",jsonObj,function(data){

    var dataObj = eval("data");
//time cnt
    var legends=[];
    var datas=[];
    for(var i = 0; i<dataObj.length; i++){
        if(dataObj[i].time!=0){
            var item={
                value:dataObj[i].cnt,
                name:'已读'+dataObj[i].times+'本'
            };
            datas.push(item);
            legends.push('已读'+dataObj[i].times+'本');
        }else{
            var item={
                value:dataObj[i].cnt,
                name:'已读0本'
            };
            datas.push(item);
            legends.push('已读0本');
        }
    }
        // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
    myChart2.setOption({
	    title : {
	        text: '本班读书次数分布统计饼图',
	        subtext: '',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a}{b} : {c} 人({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'right',
	        y:'center',
	        data:legends
	    },
	    series : [
	        {
	            name: '图书',
	            type: 'pie',
	            radius : '55%',
	            center: ['40%', '60%'],
	            data:datas,
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	});
});*/


	// 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('main1'));
  // 指定图表的配置项和数据
  myChart1.setOption({
	    title: {
	        text: '本班具体图书阅读统计柱状图',
	        subtext: ''
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
	    legend: {
	        data: ['本班已读人数', '本班未读人数'],
          left: 'right',
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: {
	        type: 'value',
	        boundaryGap: [0, 0.01]
	    },
		yAxis: {
	        type: 'category',
	        data: [<foreach name="ReadOrNot" item="vo" >'{$vo.bookname}',</foreach>]
	    },
	    series: [
	        {
	            name: '本班已读人数',
	            type: 'bar',
	            data: [<foreach name="ReadOrNot" item="vo" >'{$vo.read_times}',</foreach>]
	        },
	        {
	            name: '本班未读人数',
	            type: 'bar',
	            data: [<foreach name="ReadOrNot" item="vo" >'{$vo.not_read}',</foreach>]
	        }
	    ]
	});

        // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
    myChart2.setOption({
	    title : {
	        text: '本班读书次数分布统计饼图',
	        subtext: '',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a}{b} : {c} 人({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'right',
	        y:'center',
	        data:
			[<foreach name="ReadTime" item="vo" >'已读{$vo.times}本',</foreach>]
	    },
	    series : [
	        {
	            name: '图书',
	            type: 'pie',
	            radius : '55%',
	            center: ['40%', '60%'],
	            data:[<foreach name="ReadTime" item="vo" >
	            {value:'{$vo.cnt}',name:'已读{$vo.times}本'},</foreach>],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	});

    </script>
</block>
